<template>
  <div style="padding-bottom: 20px">
    <el-table :data="tableData" class="row-main-table" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }">
      <el-table-column prop="cardNumber" label="业务号码" align="center"></el-table-column>
      <el-table-column prop="upMb" label="上游请求的流量数据" align="center"></el-table-column>
      <el-table-column prop="setMealMb" label="套餐内总量" align="center"></el-table-column>
      <el-table-column prop="surplusMb" label="剩余的流量" align="center"></el-table-column>
      <el-table-column prop="usedMb" label="已用总量" align="center"></el-table-column>
      <el-table-column prop="dictIsPreStopCardName" label="是否是提前停机" align="center"></el-table-column>
      <el-table-column prop="dictIsHaveNextOrderName" label="是否有待充送的订单" align="center"></el-table-column>
      <el-table-column prop="interfaceCall" label="接口调用情况" align="center"></el-table-column>
      <el-table-column prop="timeConsuming" label="耗时" align="center"></el-table-column>
      <el-table-column prop="reason" label="操作原因" align="center"></el-table-column>
      <el-table-column prop="type" label="类型" align="center"></el-table-column>
      <el-table-column prop="insertTime" label="轮询时间" align="center"></el-table-column>
      <el-table-column prop="flag" label="状态" align="center">
        <template v-slot="{ row, rowIndex }">
          <div :style="{color:row.flag?'green':'red'}">{{ row.flag ? '轮询成功！' : '轮询失败！' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <div>
              <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" @click="showRequestDetail(scope.row.requestLog)" :loading="buttonRetryLoading">请求详情</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" @click="showCalDetail(scope.row.log)" :loading="buttonRetryLoading">计算详情</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="row-main-pager"
      :current-page.sync="page.current"
      :page-size="page.size"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
      background></el-pagination>

  </div>
</template>

<script>
import {billingLogList} from '@/api/getData'

export default {
  name: "index",
  props: {
    cardNumber: {
      type: String,
      default: ''
    },
    flag: {
      type: String,
      default: ''
    },
    trainingRotationId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      buttonRetryLoading: false,
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  created() {
    this.findList()
  },
  methods: {
    findList() {
      this.loading = true
      if (this.flag == '') {
        this.flag = null
      }
      if (this.cardNumber == '') {
        this.cardNumber = null
      }
      if (this.trainingRotationId == '') {
        this.trainingRotationId = null
      }
      billingLogList({page: this.page, cardNumber: this.cardNumber, flag: this.flag, trainingRotationId: this.trainingRotationId}).then(response => {
        let ct = response.data.content;
        let res = ct.map(v => {
          v.upMb = v.upMb != null ? this.$toGB.exe(v.upMb) : "0"
          v.setMealMb = v.setMealMb != null ? this.$toGB.exe(v.setMealMb) : "0"
          v.surplusMb = v.surplusMb != null ? this.$toGB.exe(v.surplusMb) : "0"
          v.usedMb = v.usedMb != null ? this.$toGB.exe(v.usedMb) : "0"
          v.insertTime = v.insertTime.replace("T", " ")
          return v
        })
        this.tableData = res
        this.page.total = response.data.totalElements
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    handleCurrentChange(currentPage) {
      this.page.current = currentPage;
      this.findList()
    },
    handleSizeChange(pageSize){
      this.page.current = 1;
      this.page.size = pageSize;
      this.findList()
    },
    showRequestDetail(row) {
      const h = this.$createElement;
      let arr = row.split("|");
      let html = '<div style="max-height:70vh;overflow:scroll">';
      arr.map((v,i) => {
        if(i==2){
          let str = v.substring(9,v.length);
          let obj = JSON.parse(str);
          let arr_data = Object.keys(obj.data);
          html += '<h5>msg: '+obj.msg+'</h5><h5>data:{'
          for(let j of arr_data){
            if(j!=='results'){
              html += '<h5 style="text-indent: 10px">'+j+': '+obj.data[j]+'</h5>'
            }
            else{
              html += '<h5 style="text-indent: 10px">'+j+': {</h5>'
              let arr_results = Object.keys(obj.data[j])
              for(let r of arr_results){
                html += '<h5 style="text-indent: 20px">'+r+': '+JSON.stringify(obj.data[j][r])+'</h5>'
                console.log(JSON.stringify(obj.data[j][r]))
              }
              html += '<h5 style="text-indent: 10px;">}</h5>'
            }
          }
          html += '<h5 style="text-indent: 10px">status: '+obj.status+'</h5>'
        }
        else{
          html += '<h5>'+v+'</h5>'
        }
        return h('span', null, v)
      })
      html += '}</h5></div>'
      this.$alert(html, '请求详情', {
        dangerouslyUseHTMLString: true
      });
      // this.$msgbox({
      //   title: '查看详情',
      //   message: h('div', {style: "display:flex;flex-direction: column;white-space:pre-wrap;word-wrap : break-word ;"},
      //     arr),
      //   confirmButtonText: '确定',
      //
      //   beforeClose: (action, instance, done) => {
      //     done();
      //   }
      // }).then(action => {
      //
      // });
    },
    showCalDetail(row) {
      const h = this.$createElement;
      let arr = row.split(",");
      let html = '<div style="max-height:70vh;overflow:scroll">';
      arr.map(v => {
        html += '<h5>'+v+'</h5>'
        return h('span', null, v)
      })
      html += '</div>'
      this.$alert(html, '计算详情', {
        dangerouslyUseHTMLString: true
      });
      // this.$msgbox({
      //   title: '查看详情',
      //   message: h('div', {style: "display:flex;flex-direction: column;white-space:pre-wrap;word-wrap : break-word ;"},
      //     arr),
      //   showCancelButton: true,
      //   confirmButtonText: '确定',
      //
      //   beforeClose: (action, instance, done) => {
      //     done();
      //   }
      // }).then(action => {
      //
      // });
    }

  },

}
</script>

<style scoped>

</style>
